<template>
    <!-- 3.所有页面添加骨架屏效果 -->
  <van-skeleton title avatar :row="3" :loading="loading">
  <div>
    <NavBar title="详情页" />
    <!-- 16.mock接口通过id获取商品详情，并在商品详情页调用实现数据展示排版 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in detail">
        <img :src="detail.img" alt="" />
      </van-swipe-item>
    </van-swipe>
    <p class="price">￥{{ detail.price }}</p>
    <p class="title">{{ detail.title }}</p>

    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" />
      <van-action-bar-icon
        icon="cart-o"
        @click="onClickIcon"
        text="购物车"
        :badge="badge"
      />
      <van-action-bar-icon icon="shop-o" text="店铺" />
      <van-action-bar-button
        type="warning"
        @click="onClickButton"
        text="加入购物车"
      />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
  </div>
  </van-skeleton>
</template>
<script setup>
import axios from "axios";
import { ref,onMounted } from "vue";
import { showToast } from "vant";
import shake from "@/utils/shake";
import { useRouter } from "vue-router";

const router = useRouter();
const detail = ref({});
axios.get("/getDetail").then((res) => {
  console.log(res);
  detail.value = res.data;
});
// 19.点击购物车图表跳转到购物车页面
const onClickIcon = () => {
  router.push("/cart");
};

// let shoplist = JSON.parse(localStorage.getItem("shoplist1")) || [];
let a = 0;
// cartList.forEach((item) => {
//   if (cartList) {
//     a += item.num;
//   }
// });
// 17.点击添加购物车，底部购物车图标角标显示购物车商品数量
const badge = ref(0);
const onClickButton = shake(() => {
    showToast("加入购物车！！！")
    badge.value++
    localStorage.setItem('shoplist1',detail.value)
}, 800);

const loading = ref(true);
onMounted(() => {
  setInterval(() => {
    loading.value = false;
  }, 800);
});

</script>
<style scoped lang='scss'>
.price {
  font-size: 30px;
  color: red;
  margin-left: 10px;
}
.title {
  margin-left: 10px;
}
img {
  width: 100%;
  height: 150px;
}
</style>